<template>
    <div class="region">
        <span>{{ lebal }}</span>：
        <div class="input-box">
            <div class="select-box" :class="(endValue.indexOf('请选择') == -1) ? 'select-box-hasData' : ''"
                @click.stop="getData">
                {{ endValue }}
            </div>
            <Icon color="rgb(80, 80, 80)" size="23" class="up-icon">
                <ChevronDown48Filled v-show="!isPull" />
                <ChevronUp48Filled v-show="isPull" />
            </Icon>
            <div class="cancel" v-show="endValue.indexOf('请选择') == -1" @click="cancelData">
                ×
            </div>
        </div>
        <div class="cascader-menus" v-show="isPull">
            <div class="cascader-menus-content">
                <ul class="cascader-menu" v-for="(menus, index) in optionsData" :key="menus.code">
                    <li class="menu-item" :class="(endValue.indexOf(item.name) != -1) ? 'menu-item-active' : ''"
                        @click.stop="getNextData(item, index)" v-for="item in menus" :key="item.code">{{
                                item.name
                        }}
                        <Icon color="rgb(74, 71, 71)" size="16" class="right-icon">
                            <ChevronRight28Regular v-if="index !== deeps - 1" />
                        </Icon>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { ChevronDown48Filled, ChevronUp48Filled, ChevronRight28Regular } from '@v2icons/fluent'
import { Icon } from '@v2icons/utils'

export default {
    name: 'Cascader',
    props: {
        lebal: String,
        deeps: Number,
        options: Array,
    },
    components: {
        Icon,
        ChevronDown48Filled,
        ChevronUp48Filled,
        ChevronRight28Regular,
    },
    data() {
        return {
            isPull: false,
            endValue: '',
            type: null,
            ischecked: false,
            optionsData: [],
        };
    },
    watch: {
        endValue: {
            handler(value) {
                if (value == '') {
                    this.endValue = '请选择' + this.lebal
                }
            },
            immediate: true
        },
        isPull(value) {
            // 设置点击其他区域下拉菜单收起
            let that = this
            let noPull = function () {
                that.isPull = false
            }
            if (value) {
                document.body.addEventListener('click', noPull)
            } else {
                document.body.removeEventListener('click', noPull)
            }
        }
    },
    mounted() {
    },

    methods: {
        getData() {
            // 获取第一级菜单，并显示
            if (this.isPull) {
                this.isPull = false
            } else {
                this.isPull = true
                this.optionsData[0] = this.options
            }
        },
        getNextData(item, index) {
            // 显示父地区对应子地区列表
            if (index < this.deeps - 1) {
                let nextData = this.optionsData[index].filter(val => val.code == item.code)[0].children
                // 设置父地区对应子地区
                this.optionsData.splice(index + 1, 1, nextData);
                // 因为点击了父地区，所以删除子地区后的层级地区
                this.optionsData.splice(index + 2)
            } else {
                // 选择到最后一级则关闭菜单
                this.isPull = false
            }

            // 在表单显示选择后的地区
            if (index == 0) {
                this.endValue = item.name
            } else {
                let endValueArr = this.endValue.split(" / ")
                endValueArr[index] = item.name
                // 删除当前选择之后的表单显示的层级
                endValueArr.splice(index + 1)

                this.endValue = endValueArr.join(" / ")
            }
        },
        // 删除所选地区
        cancelData() {
            this.endValue = ''
            this.optionsData.splice(0)
            this.isPull = false
        }   
    },
};
</script>

<style lang="less" scoped>
.region {
    display: flex;
    align-items: center;
    width: 400px;
    position: relative;
    color: rgb(80, 80, 80);

    .input-box {
        width: 80%;
        position: relative;

        .select-box {
            width: 100%;
            height: 30px;
            line-height: 30px;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 23px;
            color: rgb(192, 192, 192);
            font-size: 13px;
            border: 1px solid rgb(217, 217, 217);
            border-radius: 2px;
            cursor: pointer;
            user-select: none;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
        }

        .select-box-hasData {
            color: rgb(80, 80, 80);
        }

        .up-icon {
            position: absolute;
            right: 6px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            z-index: -1;
        }

        .cancel {
            background-color: rgb(80, 80, 80);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
            right: -25px;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;

            &:hover {
                background-color: rgb(124, 124, 124);
            }
        }
    }

    .cascader-menus {
        width: 100%;
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 30px;
        // overflow: hidden;
        padding: 5px;
        cursor: pointer;


        .cascader-menus-content {
            display: flex;
            box-shadow: 0 0 5px rgb(210, 210, 210);

            .cascader-menu {
                height: 100px;
                overflow-y: scroll;
                list-style: none;
                padding: 3px 0;

                .menu-item {
                    padding: 5px 10px;
                    padding-right: 40px;
                    user-select: none;
                    font-size: 13px;
                    white-space: nowrap;
                    position: relative;
                    color: rgb(74, 71, 71);

                    &:hover {
                        background-color: rgb(255, 241, 220);
                    }

                    .right-icon {
                        position: absolute;
                        right: 10px;
                        top: 0;
                        bottom: 0;
                        margin: auto 0;
                    }

                }

                .menu-item-active {
                    background-color: rgb(246, 246, 246);
                    font-weight: 700;
                }
            }

            /* 设置滚动条的样式 */
            ::-webkit-scrollbar {
                width: 7px;
            }

            /* 滚动槽 */
            ::-webkit-scrollbar-track {
                width: 7px;
                background-color: rgb(247, 246, 246);

            }

            /* 滚动条滑块 */
            ::-webkit-scrollbar-thumb {
                border-radius: 3px;
                background: rgba(0, 0, 0, 0.1);
            }

        }
    }

}
</style>